<template>
  <div>
    <div class="header">
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="addUser"
          >添加人员</el-button
        >
        <el-button type="primary" icon="el-icon-plus" :disabled="true">批量添加</el-button>
      </div>
      <el-input
        v-model="search"
        size="mini"
        placeholder="输入关键字搜索"
        class="search"
      />
    </div>

    <div style="margin: 0 10px 0 10px">
      <el-table :data="filterData" border>
        <el-table-column width="100" align="center" type="index" label="序号">
        </el-table-column>
        <el-table-column prop="username" label="账号"> </el-table-column>
        <el-table-column prop="realName" label="姓名"> </el-table-column>
        <el-table-column prop="grade" label="班级"> </el-table-column>
        <el-table-column prop="roles" label="角色"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ $index, row }">
            <TipButton
              style="margin-right: 10px"
              type="warning"
              size="mini"
              @click="updateUserInfo(row)"
              icon="el-icon-edit"
              title="修改用户信息"
            ></TipButton>
            <TipButton
              type="danger"
              size="mini"
              @click="deleteUser(row)"
              icon="el-icon-delete"
              title="删除用户"
            ></TipButton>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="个人信息" :visible.sync="dialogFormVisible" center>
      <el-form :model="form" label-width="100px">
        <el-form-item label="账号">
          <el-input
            class="input-cls"
            v-model="form.username"
            placeholder="可用学号作为账号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            class="input-cls"
            v-model="form.password"
            :placeholder="placeHolder"
            :minlength="6"
            :maxlength="20"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="年级专业班级">
          <el-input
            class="input-cls"
            v-model="form.grade"
            placeholder="如20通信3班"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            class="input-cls"
            v-model="form.realName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.roles" placeholder="请选择角色">
            <el-option label="总管理员" value="总管理员"></el-option>


            <el-option label="普通管理员" value="普通管理员"></el-option>
            <el-option label="用户" value="用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmAddOrUpdateUserInfo"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TipButton from "@/components/tipButton/index.vue";
export default {
  components: {
    TipButton,
  },
  data() {
    return {
      search: "",
      data: [],
      dialogFormVisible: false,
      form: {
        username: "",
        realName: "",
        roles: "",
        grade: "",
        password: "",
      },
      placeHolder: "",
    };
  },
  methods: {
    async getUserList() {
      const res = await this.$API.user.getUserList();
      if (res.code) {
        res.data.forEach((item) => {
          item.password = "";
        });
        this.data = res.data;
      }
    },
    updateUserInfo(row) {
      this.form = row;
      this.placeHolder = "密码不超过20位(不修改则不填)";
      this.dialogFormVisible = true;
    },
    confirmAddOrUpdateUserInfo() {
      if (this.form.id) {
        let info = {};
        if (this.form.password) {
          info = this.form;
        } else {
          const { id, grade, realName, username, roles } = this.form;
          info = { id, grade, realName, username, roles };
        }
        this.$API.user.updateUserInfo(info).then((res) => {
          this.$message.success(res.msg);
          this.dialogFormVisible = false;
          this.getUserList()
        });
      }else{
        this.$API.user.register(this.form).then((res) => {
          this.$message.success(res.msg);
          this.dialogFormVisible = false;
          this.getUserList()
        });
      }
    },
    deleteUser(row) {
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          return this.$API.user.deleteUser(row.id);
        })
        .then((res) => {
          this.$message.success("删除成功");
          this.getUserList();
        });
    },

    addUser() {
      this.placeHolder = "密码不超过20位";
      this.form = {
        username: "",
        realName: "",
        roles: "",
        grade: "",
        password: "",
      };
      this.dialogFormVisible = true;
    },
    cancel(){
      this.dialogFormVisible = false
      this.form = {
        username: "",
        realName: "",
        roles: "",
        grade: "",
        password: "",
      }
    }
  },
  mounted() {
    this.getUserList();
  },
  computed: {
    filterData() {
      return this.data.filter((item) => {
        let flag = 0;
        for (let key in item) {
          if (
            !this.search ||(item[key].toLowerCase&&item[key].toLowerCase().includes(this.search.toLowerCase()))
          ) {
            flag = 1;
            break;
          }
        }
        return flag;
      });
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.search {
  align-self: flex-end;
  width: 250px;
}
.input-cls {
  width: 80%;
}
</style>